<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>故障统计frame</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/common.css"/>
		<style>
			body {
			}
			.m-t {
				margin-top: 13px;
			}
			.m-l {
				margin-left: 13px;
			}
			.color-1 {
				color: #6e6e6e;
			}
			.color-2 {
				color: #b4b4b4;
			}
			.color-3 {
				color: #ff0f2e;
			}
			.color-4 {
				color: #ff8000;
			}
			.color-5 {
				color: #999999;
			}
			/* 菜单 */
			.order-details-menu-container {
				padding: 13px 62.5px;
				text-align: center;
			}
			.order-details-menu-container > div {
				padding: 0 15px;
				background-color: #f2f2f2;
				height: 35px;
				line-height: 35px;
				border-radius: 20px;
			}
			.icon-date {
				width: 24px;
				height: 22px;
				background: url(../../image/icon_date.png) no-repeat center;
				background-size: 24px 22px;
			}
			.menu-btn-s {
				width: 30px;
				height: 20px;
			}
			#btn-next {
				background-position: right center;
			}
			#btn-pre {
				background-position: left center;
			}
			/* 统计表样式 */
			.statistics-title-style {
				padding: 0 15px;
				background-color: #F2F2F2;
				height: 20px;
				line-height: 20px;
				font-size: 13px;
			}
			.statistics-style {
				padding: 0 15px;
			}
			.statistics-style > div {
				height: 39px;
			}
			.statistics-style > div:nth-child(1) {
				border-bottom: #e6e6e6 1px solid;
			}
			/* 历史故障列表 */
			#list-complaint-history > li {
				padding: 0 10px;
				border-bottom: #f8f8f8 13px solid;
			}
			#list-complaint-history > li:nth-last-child(1) {
				border-bottom: 0;
			}
			#list-complaint-history > li > div {
				padding: 13px 0;
			}
			#list-complaint-history > li > div:nth-child(1) {
				border-bottom: #e6e6e6 1px solid;
			}
			/*评分容器&处理人容器*/
			.item-c2.none, .item-c1.none {
				display: none;
			}
			.item-c2 {
				margin-top: 13px;
			}
			.item-c1 {
				margin-top: 13px;
				color: #6e6e6e;
			}
			/*故障比例样式*/
			.cp-bl-item-p {
				padding: 15px 15px 0;
				background-color: #F8F8F8;
			}
			.cp-bl-item {
				background-color: #fff;
				height: 40px;
				line-height: 40px;
				background-position: right center;
			}
		</style>
	</head>
	<body>
		<div class="order-details-menu-container">
			<div class="flex-container flex-between flex-center-v">
				<div id="btn-pre" class="menu-btn-s icon-arrow-left-bk"></div>
				<div id="btn-date" class="icon-date "></div>
				<div id="btn-next" class="menu-btn-s icon-arrow-right-bk"></div>
			</div>
		</div>
		<div>
			<div class="statistics-title-style">
				报障统计
			</div>
			<!-- 统计数量 -->
			<div class="statistics-style statistics-num">
				<div class="flex-container flex-center-v">
					<div id="acms-y" class="flex-item"style="text-align: center">
						2017年
					</div>
					<div class="flex-item"style="text-align: center">
						报障数
					</div>
					<div class="flex-item"style="text-align: center">
						完成数
					</div>
					<div class="flex-item" style="text-align: center">
						未完成数
					</div>
				</div>
				<div class="flex-container flex-center-v">
					<div id="acms-m" class="flex-item"style="text-align: center">
						--
					</div>
					<div id="acms-msg-1" class="flex-item"style="text-align: center">
						--
					</div>
					<div id="acms-msg-2" class="flex-item"style="text-align: center">
						--
					</div>
					<div id="acms-msg-3"  class="flex-item" style="text-align: center">
						--
					</div>
				</div>
			</div>
		</div>
		<div id="acms-btn-cp-bl" class="cp-bl-item-p">
			<div class="cp-bl-item icon-arrow-right-bk">
				故障比例
			</div>
		</div>
		<div>
			<div class="statistics-title-style">
				评分统计
			</div>
			<!-- 统计数量 -->
			<div class="statistics-style statistics-num">
				<div class="flex-container flex-center-v">
					<div class="flex-item"style="text-align: center">
						一星
					</div>
					<div class="flex-item"style="text-align: center">
						二星
					</div>
					<div class="flex-item"style="text-align: center">
						三星
					</div>
					<div class="flex-item" style="text-align: center">
						四星
					</div>
					<div class="flex-item" style="text-align: center">
						五星
					</div>
				</div>
				<div class="flex-container flex-center-v">
					<div id="acms-msg-5" class="flex-item"style="text-align: center">
						--
					</div>
					<div id="acms-msg-6" class="flex-item"style="text-align: center">
						--
					</div>
					<div id="acms-msg-7" class="flex-item"style="text-align: center">
						--
					</div>
					<div id="acms-msg-8" class="flex-item" style="text-align: center">
						--
					</div>
					<div id="acms-msg-9" class="flex-item" style="text-align: center">
						--
					</div>
				</div>
			</div>
			<div>
				<div class="statistics-title-style">
					历史故障
				</div>
				<div id="list-item-temp" style="display: none;">
					<div>
						<div class="flex-container flex-between">
							<div class="item-msg-1">
								--
							</div>
							<div class="item-msg-2">
								--
							</div>
						</div>
					</div>
					<div>
						<div class="flex-container flex-between">
							<div class="item-msg-3 color-1">
								--
							</div>
							<div class="item-msg-4 color-1">
								--
							</div>
						</div>
						<div class="m-t color-1">
							<span>故障地点：</span><span class="item-msg-5">--</span>
						</div>
						<div class="item-c1 none">
							<span>处理人：</span><span class="item-msg-6">--</span>
						</div>
						<div class="item-c2 none flex-container flex-center-v">
							<div class="color-1">
								<nobr>
									报障评分：
								</nobr>
							</div>
							<div class="m-l icon-xx icon-xx-n"></div>
							<div class="m-l icon-xx icon-xx-n"></div>
							<div class="m-l icon-xx icon-xx-n"></div>
							<div class="m-l icon-xx icon-xx-n"></div>
							<div class="m-l icon-xx icon-xx-n"></div>
						</div>
					</div>
				</div>
				<ul id="list-complaint-history"></ul>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/request.js"></script>
	<script type="text/javascript">
		//需要所搜索的区域
		var mSearchAreaId;
		//需要所搜索的时间
		var mSearchTime;
		//当前时间
		var mCurrentY;
		var mCurrentM;
		//选择时间
		var mCheckedY;
		var mCheckedM;
		//列表
		var mListView;
		//列表数据
		var mLVDatas;
		//是否加载更多
		var mIsLoadMore = false;
		//第几页
		var mPageNum = 1;
		//每页数据条数
		var mPageSize = 10;
		apiready = function() {
			initData();
			initView();
			requestList(mPageSize, mPageNum);
		};
		function initData() {
			mSearchAreaId = api.pageParam.areaid;
			var time = api.pageParam.time;
			var date = new Date();
			mCurrentY = date.getFullYear();
			mCurrentM = date.getMonth() + 1;
			//如果传来的值为空，表示从未选择过时间，反之选用已经选过的时间
			if (time == null) {
				mCheckedY = mCurrentY;
				mCheckedM = mCurrentM;
			} else {
				mCheckedY = time.y;
				mCheckedM = time.m;
			}
		}

		function initView() {
			var doc = document;
			mListView = doc.getElementById('list-complaint-history');
			var btnCpBl = doc.getElementById('acms-btn-cp-bl');
			var btnPreM = doc.getElementById('btn-pre');
			var btnNextM = doc.getElementById('btn-next');
			var btnDate = doc.getElementById('btn-date');
			btnPreM.onclick = function() {
				preM();
			}
			btnNextM.onclick = function() {
				nextM();
			}
			btnDate.onclick = function() {
				openDatePg();
			}
			btnCpBl.onclick = function() {
				openBlPg();
			}
			listenerScrollBottom();
		}

		/**
		 * 打开时间选择页面
		 */
		function openDatePg() {
			api.openWin({
				name : 'date',
				url : './date.html'
			});
		}

		/**
		 * 打开故障比例页面
		 */
		function openBlPg() {
			api.openWin({
				name : 'cp_ratio',
				url : './cp_ratio.html',
				pageParam : {
					'time' : mSearchTime
				}
			});
		}

		/**
		 * 格式化时间，生成符合服务器要求的格式。
		 */
		function formateRDate(y, m) {
			var ty = y;
			m = parseInt(m);
			var tm = m >= 10 ? m : '0' + m
			return ty + '-' + tm;
		}

		function preM() {
			//如果选择的月，等于1，就进入上一年的12月
			if (mCheckedM <= 1) {
				mCheckedY--;
				mCheckedM = 12;
			} else {
				mCheckedM--;
			}
			mPageNum = 1;
			requestList(mPageSize, mPageNum);
		}

		function nextM() {
			var isNext = false;
			//如果选择的年<当前年，
			if (mCheckedY < mCurrentY) {
				if (mCurrentY > 11) {
					isNext = false;
				} else {
					mCheckedM++;
					isNext = true;
				}
			} else if (mCheckedY == mCurrentY) {
				//并且选择的月>=当前月，那么就不在进入下一个月
				if (mCheckedM >= mCurrentM) {
					isNext = false;
				} else {
					mCheckedM++;
					isNext = true;
				}
			} else {
				isNext = false;
			}
			console.log('mCheckedM=' + mCheckedM + '    mCurrentM=' + mCurrentM);
			if (isNext) {
				mPageNum = 1;
				requestList(mPageSize, mPageNum);
			} else {
				api.toast({
					msg : '已经是最新的一个月'
				});
			}
		}

		function showYM() {
			//年
			var y = document.getElementById('acms-y');
			y.innerText = mSearchTime.split('-')[0] + '年';
			//月
			var m = document.getElementById('acms-m');
			m.innerText = mSearchTime.split('-')[1] + '月';
			var date = {};
			date.y = mSearchTime.split('-')[0];
			date.m = mSearchTime.split('-')[1];
			triggerDateListener(date);
		}

		/**
		 * 触发“日期选择”的监听
		 */
		function triggerDateListener(date) {
			api.sendEvent({
				name : 'DateListener',
				extra : date
			});
		}

		/**
		 * 展示非列表view
		 * @param{Array} datas - 故障统计数据
		 */
		function showView(datas) {
			var doc = document;
			showYM();
			//报障数
			var msg1 = doc.getElementById('acms-msg-1');
			msg1.innerText = MyCom.dataFaultTolerant(datas.total);
			//完成数
			var msg2 = doc.getElementById('acms-msg-2');
			msg2.innerText = MyCom.dataFaultTolerant(datas.success);
			//未完成数
			var msg3 = doc.getElementById('acms-msg-3');
			msg3.innerText = MyCom.dataFaultTolerant(datas.fail);
			//一星
			var msg5 = doc.getElementById('acms-msg-5');
			msg5.innerText = MyCom.dataFaultTolerant(datas.one);
			//二星
			var msg6 = doc.getElementById('acms-msg-6');
			msg6.innerText = MyCom.dataFaultTolerant(datas.two);
			//三星
			var msg7 = doc.getElementById('acms-msg-7');
			msg7.innerText = MyCom.dataFaultTolerant(datas.three);
			//四星
			var msg8 = doc.getElementById('acms-msg-8');
			msg8.innerText = MyCom.dataFaultTolerant(datas.four);
			//五星
			var msg9 = doc.getElementById('acms-msg-9');
			msg9.innerText = MyCom.dataFaultTolerant(datas.five);
		}

		/**
		 * 显示列表
		 * @param{Array} datas - 故障列表数据
		 */
		function showListView(datas) {
			if (datas == null) {
				return;
			}
			var index = 0;
			var item = '';
			//判断是否是加载更多。是，mLVDatas添加数据。否，mLVDatas清空数据，mListView清空html
			if (mIsLoadMore) {
				for (index in datas) {
					mLVDatas.push(datas[index]);
				}
			} else {
				mListView.innerHTML = '';
				mLVDatas = null;
				mLVDatas = datas;
			}
			index = 0;
			//展示listview
			for (index in datas) {
				item = createLVItem(datas[index]);
				mListView.appendChild(item);
			}
			if (mIsLoadMore) {
				mIsLoadMore = false;
				hideLoadMoreView();
			} else {
				api.hideProgress();
			}
			api.hideProgress();
		}

		/**
		 * 创建列表的item
		 * @param {Object} data - 用户信息的object对象
		 */
		function createLVItem(data) {
			var i = 0;
			var gradle = 0;
			//状态： 1 待处理 2.已受理 3 .处理中  4.已处理 5.疑难单 6.报障关闭 7.已完成
			var status = data.status;
			//是否二次受理过
			var isTwo = data.two == 0 ? false : true;
			var li = document.createElement('li');
			li.innerHTML = document.getElementById('list-item-temp').innerHTML;
			//故障情况
			var itemMsg1 = li.getElementsByClassName('item-msg-1')[0];
			itemMsg1.innerText = MyCom.dataFaultTolerant(data.title);
			//故障状态
			var itemMsg2 = li.getElementsByClassName('item-msg-2')[0];
			//报障人
			var itemMsg3 = li.getElementsByClassName('item-msg-3')[0];
			itemMsg3.innerText = MyCom.dataFaultTolerant(data.nick_name);
			//报障时间
			var itemMsg4 = li.getElementsByClassName('item-msg-4')[0];
			itemMsg4.innerText = MyCom.dataFaultTolerant(data.create_time);
			//故障地点
			var itemMsg5 = li.getElementsByClassName('item-msg-5')[0];
			itemMsg5.innerText = MyCom.dataFaultTolerant(data.warn_location);
			//处理人
			var itemMsg6 = li.getElementsByClassName('item-msg-6')[0];
			//处理人容器
			var c1 = li.getElementsByClassName('item-c1')[0];
			//评分容器
			var c2 = li.getElementsByClassName('item-c2')[0];
			//评分星星
			var xxs = li.getElementsByClassName('icon-xx');
			if (status == 1) {
				itemMsg2.innerText = '待处理';
				itemMsg2.style.color = '#ff0f2e';
			} else if (status == 2) {
				if (isTwo) {
					itemMsg2.innerText = '二次受理';
				} else {
					itemMsg2.innerText = '已受理';
				}
				itemMsg2.style.color = '#ff8000';
				c1.className = 'item-c1';
				itemMsg6.innerText = MyCom.dataFaultTolerant(data.action_person) + MyCom.dataFaultTolerant(data.action_phone);
			} else if (status == 3) {
				if (isTwo) {
					itemMsg2.innerText = '二次处理中';
				} else {
					itemMsg2.innerText = '处理中';
				}
				itemMsg2.style.color = '#ff8000';
				c1.className = 'item-c1';
				itemMsg6.innerText = MyCom.dataFaultTolerant(data.action_person) + MyCom.dataFaultTolerant(data.action_phone);
			} else if (status == 4) {
				if (isTwo) {
					itemMsg2.innerText = '已二次处理';
				} else {
					itemMsg2.innerText = '已处理';
				}
				itemMsg2.style.color = '#ff8000';
				c1.className = 'item-c1';
				itemMsg6.innerText = MyCom.dataFaultTolerant(data.action_person) + MyCom.dataFaultTolerant(data.action_phone);
			} else if (status == 5) {
				itemMsg2.innerText = '疑难单';
				itemMsg2.style.color = '#ff8000';
				c1.className = 'item-c1';
				itemMsg6.innerText = MyCom.dataFaultTolerant(data.action_person) + MyCom.dataFaultTolerant(data.action_phone);
			} else if (status == 6) {
				itemMsg2.innerText = '报障关闭';
				itemMsg2.style.color = '#b4b4b4';
			} else if (status == 7) {
				itemMsg2.innerText = '已完成';
				itemMsg2.style.color = '#b4b4b4';
				c1.className = 'item-c1';
				itemMsg6.innerText = MyCom.dataFaultTolerant(data.action_person) + MyCom.dataFaultTolerant(data.action_phone);
			}
			gradle = data.point;
			if (gradle == null) {
			} else {
				c2.className = 'item-c2 flex-container flex-center-v';
				for (; i < gradle; i++) {
					xxs[i].className = 'm-l icon-xx icon-xx-s';
				}
			}
			li.onclick = function() {
				var lis = mListView.getElementsByTagName('li');
				var i = 0;
				for (; i < lis.length; i++) {
					if (this == lis[i]) {
						openDetailsW(mLVDatas[i]);
						break;
					}
				}
			}
			return li;
		}

		/**
		 * 打开详情页
		 * @param{Object} data - 包含单条故障数据的json数据
		 */
		function openDetailsW(data) {
			api.openWin({
				name : 'complaint_details',
				url : './complaint_details.html',
				pageParam : {
					'id' : data.id//传递故障id
				}
			});
		}

		/**
		 * 隐藏“加载更多”的view
		 */
		function hideLoadMoreView() {
			var loadViews = document.getElementsByClassName('load-more-content');
			if (loadViews.length != 0) {
				document.getElementsByTagName('body')[0].removeChild(loadViews[0]);
			}
		}

		/**
		 * 展示“加载更多”的view
		 */
		function showLoadMoreView() {
			var loadView = document.createElement('div');
			loadView.className = 'load-more-content';
			loadView.innerHTML = '<img src="../../image/icon_loading.png" /><span>加载中</span>';
			document.getElementsByTagName('body')[0].appendChild(loadView);
		}

		/**
		 * 加载更多失败处理
		 */
		function loadMoreFailure(msg) {
			msg = msg || '加载更多失败！'
			//还原页数（第几页）
			mPageNum--;
			mIsLoadMore = false;
			hideLoadMoreView();
			api.toast({
				msg : msg
			});
		}

		//设置“滑动到底部”事件监听
		function listenerScrollBottom() {
			api.addEventListener({
				name : 'scrolltobottom',
				extra : {
					threshold : 0 //设置距离底部多少距离时触发，默认值为0，数字类型
				}
			}, function(ret, err) {
				//判断列表是否已经到达屏幕底部，是，就代表可以加载更多；否，就不让加载更多。
				if (!mIsLoadMore) {
					mIsLoadMore = true;
					showLoadMoreView();
					requestList(mPageSize, ++mPageNum)
				}
			});
		}

		/**
		 * 服务器请求：获取统计结果
		 * @param{int} pgS - 每页的数据条数
		 * @param{int} pgN - 页数
		 * @param{String} time - 时间(2017-07)
		 * @param{Number} areaid - 要搜索的区域id
		 * @param{String} searchmsg - 要搜索的内容
		 */
		function requestList(pgS, pgN) {
			var tag = 'requestList_more';
			if (!mIsLoadMore) {
				api.showProgress({
				});
				api.cancelAjax({
					tag : tag
				});
				tag = null;
			}
			mSearchTime = formateRDate(mCheckedY, mCheckedM);
			var data = {
				values : {
					'page' : pgN,
					'rows' : pgS,
					'time' : mSearchTime,
					'protect_id' : mSearchAreaId
				}
			};
			var url = $api.getStorage(MyCom.key_server) + MyRequest.URL_SS_RESULT;
			MyRequest.requestMethod(url, data, function(re) {
				if (re) {
					console.log('获取统计结果---re=' + JSON.stringify(re))
					var code = re.code;
					showYM();
					if (code == 1) {
						if (!mIsLoadMore) {
							showView(re.warncount[0]);
						}
						showListView(re.warnlist);
					} else {
						if (!mIsLoadMore) {
							api.hideProgress();
							api.alert({
								title : '错误提示',
								msg : '此月' + re.msg,
							}, function(ret, err) {
							});
							//数据为空
							showView(new Array());
							showListView(new Array());
						} else {
							//还原页数（第几页）
							loadMoreFailure('没有更多数据！');
						}
					}
				} else {
					if (!mIsLoadMore) {
						MyCom.errorTip(2);
					} else {
						loadMoreFailure();
					}
				}
			}, tag);
		}
	</script>
</html>
